<template>
  <view class="home">
    <view class="nav-box">
      <view class="reserve-item" @click="$u.route('/pages/houseMine/houseReserve/reserveDetail')">
        <u-text :text="`小区：${orderInfo.house.xiaoqu}`" color="#000" bold></u-text>
        <u-text margin="12rpx 0 " size="14"
          :text="`区域：${orderInfo.house.province}${orderInfo.house.city}${orderInfo.house.district}`"
          color="#333"></u-text>
        <u-text margin="12rpx 0 " text="新苑家园" color="#333" size="14"></u-text>
        <u-text text="房屋：13号楼12单元13层1502" color="#666" size="12"></u-text>
        <u-text
          :text="`${orderInfo.house.space}㎡ | ${orderInfo.house.house_type_text} | ${orderInfo.house.lou_num}/${orderInfo.house.total_floor}层 | ${orderInfo.house.renovation_text} | ${orderInfo.house.locker==1?'有储物间':'无储物间'} | ${orderInfo.house.lift==1?'有电梯':'无电梯'}`"
          color="#DF0F0F" size="13"></u-text>
        <view class="">
          <text>市场价：{{orderInfo.house.market_price}}万</text>
          <text class="u-m-l-60">特价：{{orderInfo.house.price}}万</text>
        </view>
      </view>
    </view>
    <up-cell-group :border="false" customStyle="background:#fff">
      <up-cell title="姓名" :value="orderInfo.house.real_name"> </up-cell>
      <up-cell title="身份证" :value="orderInfo.house.id_card"> </up-cell>
      <up-cell title="姓名" :border="false" :value="orderInfo.house.user_phone"> </up-cell>
    </up-cell-group>
    <up-cell-group title="预定定金" :border="false" customStyle="background:#fff;margin-top:20rpx">
      <up-cell title="费用金额" titleStyle="fontSize:26rpx" :border="false">
        <template #value>
          <u-text color="#E22020" size="14" :text="`￥${orderInfo.pay_price}`" align="right"></u-text>
        </template>
      </up-cell>
    </up-cell-group>
    <up-cell-group title="订单时间" :border="false" customStyle="background:#fff;margin-top:20rpx">
      <up-cell title="预定时间" titleStyle="fontSize:26rpx" :border="false">
        <template #value>
          <u-text color="#000" size="14" :text="orderInfo.scheduled_time" align="right"></u-text>
        </template>
      </up-cell>
    </up-cell-group>
    <scroll-view scroll-x class="user-box">
      <view class="user-item">
        <view class="u-flex-y-center">
          <u-image :src="prefixURL(orderInfo.house.broker.avatar)" width="72rpx" height="72rpx"
            shape="circle"></u-image>
          <view class=" u-m-l-12">
            <u-text :text="orderInfo.house.broker.nickname" color="#000" size="13" bold></u-text>
            <u-text text="经纪人" color="#EF2F17" size="11" margin="8rpx 0 0 0"> </u-text>
          </view>
        </view>
        <view class="u-flex-y-center u-flex-between u-m-t-20">
          <u-image src="/static/images/01_31gg.png" :fade="false" width="76rpx" height="38rpx"
            @click="$u.route(`/pages/houseMessage/messageDetail?chat_id=${orderInfo.house.broker.id}&chat_name=${orderInfo.house.broker.nickname}`)"></u-image>
          <u-image src="/static/images/01_dd.png" :fade="false" width="76rpx" @click="handleCall"
            height="38rpx"></u-image>
        </view>
      </view>
    </scroll-view>
    <view class="action-bar">
      <u-row gutter="13">
        <u-col span="4">
          <up-button plain shape="circle" color="#F87610" text="在线咨询"
            @click="$u.route(`/pages/houseMessage/messageDetail?chat_id=${orderInfo.house.broker.id}&chat_name=${orderInfo.house.broker.nickname}`)"></up-button>
        </u-col>
        <u-col span="4">
          <up-button plain color="#F87610" shape="circle" text="电话咨询" @click="handleCall"></up-button>
        </u-col>
        <u-col span="4">
          <up-button color="#F87610" shape="circle" :text="status_text" @click="handleSave"
            v-if="orderInfo.status == 1 || orderInfo.status == 2"></up-button>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script setup>
  import { computed, onMounted, ref } from 'vue';
  import { order_cancel, order_del, user_order_detail } from '../../../config/api';
  import { prefixURL } from '../../../util/util';
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    }
  })
  const orderInfo = ref({
    house: {
      broker: ''
    }
  })
  const status_text = computed(() => {
    switch (+orderInfo.value.status) {
      case 1:
        return '取消预订'
      case 2:
        return '删除预定'
    }
  })
  onMounted(() => {
    _user_order_detail()
  })
  const handleCall = () => {
    uni.makePhoneCall({
      phoneNumber: orderInfo.house.user_phone
    })
  }
  const handleSave = () => {
    if (orderInfo.value.status == 1) _order_cancel()
    if (orderInfo.value.status == 2) _order_del()
  }
  // 取消预定
  const _order_cancel = () => {
    order_cancel({ id: props.id }).then(res => {
      uni.$u.toast(res.msg)
      _user_order_detail()
    })
  }
  // 删除预定
  const _order_del = () => {
    order_del({ id: props.id }).then(res => {
      uni.$u.toast(res.msg)
      _user_order_detail()
    })
  }
  // 预定详情
  const _user_order_detail = () => {
    user_order_detail({ id: props.id }).then(res => {
      console.log(res)
      orderInfo.value = res.data
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  }

  .nav-box {
    padding: 20rpx;
    background: #fff;

    .reserve-item {
      background: #F8F8F8;
      border-radius: 24rpx;
      padding: 20rpx;
      font-size: 24rpx;
      color: #333;
      font-weight: 800;

      text+text {
        color: #df0f0f;
      }
    }
  }

  .user-box {
    white-space: nowrap;
    padding: 20rpx;

    .user-item {
      width: 204rpx;
      height: 160rpx;
      background: linear-gradient(180deg, #FFDEDA 0%, #FFFFFF 100%);
      border-radius: 12rpx;
      padding: 10rpx;
      display: inline-block;
      margin-right: 20rpx;
    }
  }

  .action-bar {
    padding: 30rpx;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 16rpx solid #f8f8f8;
    z-index: 9;
  }
</style>